<template>
	<div class="paddB60">

            <div class="operatBtnWrapper">
                <button class="operatBtn marR5" @click.stop="routerToAddRank">新增技能</button>
            </div>
            <div class="tableWrapper1 paddLR20">
                <el-table
                    @sort-change="sortChange"
                    :data="tableShowRank"
                    border
                    style="width: 100%">
                    <el-table-column
                    prop="rank_color"
                    align="center"
                    sortable = 'custom'
                    width = "200"
                    label="颜色标签">
                    <template slot-scope="scope">
                        <el-popover
                        popper-class = "colorPoper"
                        placement="bottom-end"
                        width="60"
                        trigger="hover">
                            <color-picker  @changeColorLabel="editColorLabel" :rankId = "scope.row.id" :defaultColor = "scope.row.rank_color"></color-picker>
                            <span title="设置颜色标签"  style="cursor:pointer;" slot="reference"><icon name="square" class="scaleIcon1" :style="{fill : scope.row.rank_color === null ? '#000000' : scope.row.rank_color}"></icon></span>
                        </el-popover>
                    </template>
                    </el-table-column>
                    <el-table-column
                    prop="rank_name"
                    align="center"
                    sortable = 'custom'
                    label="技能名称">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    align="center"
                    label="操作">
                        <template slot-scope="scope">
                            <span title="修改" class="marR15"  style="cursor:pointer;" v-if="scope.row.usedRankCount <= 0"><icon name="change" class="scaleIcon1" @click.native.stop="editRank(scope.row.id,scope.row.rank_name)"></icon></span>
                            <span title="删除" class="marR15"  style="cursor:pointer;" v-if="scope.row.usedRankCount <= 0"><icon name="del" class="scaleIcon1" @click.native.stop="deleteRank(scope.row.id,)"></icon></span>
                            <span v-else>/</span>
                            <!-- <span title="设置颜色标签"><el-color-picker v-model="scope.row.rank_color" class="colorLabel" @change = "editColorLabel(scope.row.id,scope.row.rank_color)"></el-color-picker></span> -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        
            <div class="rightPageWripper" v-if="tableShowRank.length > 0">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="serverPage.currPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size.sync="serverPage.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="serverPage.totalSize">
                </el-pagination>
            </div>

	</div>
</template>

<script>
import http from '@/assets/js/http'
import _g from '@/assets/js/global'
// import { getPageData} from "@/assets/js/common.js"

import colorPicker from '@/components/Common/colorPicker.vue' 



  export default {
    data() {
      return {
        tableShowRank: [],              //  显示的职业技能

        serverPage:{                                                                                              //  后台分页                                    
            pageSize:10,                 //  每页显示10个
            totalSize:0,                 //  总记录数
            currPage:1,                    //  当前页码 
        },  
        sortType:'ascending',                        // ascending升序，descending降序
        sortIdent : 'rank_name',//  排序字段，默认根据职业技能名称排序
        // sortIdent:'pos_name',                         //  排序字段与数据库保持一致，默认为根据职位排序
      }
    },
    methods: {
    /* 手动排序 */
    sortChange(column, prop, order) {
        console.log(column)
        if(column.order !== null){
             this.sortType = column.order
             this.sortIdent = column.prop
            this.getAllPagingRank()
        }
    },
    /* 编辑职业技能颜色标签 */
    editColorLabel(rankId,rankColor){
        const that = this
        let str = '是否确认更改颜色标签?'
        if(rankColor === null){
            str = '是否确认清除颜色标签?'
        }
        that.$confirm(str, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
        }).then(() => {
            _g.showLoading('提交中')
            that.apiPost('admin/rank/editColorLabel', {rankId,rankColor}).then((res) => {
                    _g.showLoading().close()
                    if(typeof res === 'string'){
                    res = JSON.parse(res)
                    }
                if (res.code != 200) {
                    that.handleError(res)
                } else {
                    if(res.data.isSuccess === 0){             //  成功
                        _g.toastMsg("success", res.message)
                         that.getAllPagingRank()
                    }else if((res.data.isSuccess === 1)){
                        _g.toastMsg("error", res.message)
                    }else if((res.data.isSuccess === 2)){
                        _g.toastMsg("warning", res.message)
                    }
                }
            })
        }).catch(() => {
            that.getAllPagingRank()
        });
    },
    /* 删除职业技能 */
    deleteRank(rankId){
        const that = this
        that.$confirm('是否确认删除职业技能?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                  center: true
              }).then(() => {
                    _g.showLoading('删除中')
                    that.apiPost('/admin/rank/delete', {rankId}).then((res) => {
                        _g.showLoading().close()
                        if(typeof res === 'string'){
                            res = JSON.parse(res)
                        }
                        if (res.code != 200) {
                            that.handleError(res)
                        } else {
                            if(res.data.isSuccess === 0){
                                _g.toastMsg("success", res.message)
                                that.getAllPagingRank()
                            }else if(res.data.isSuccess === 1){
                                _g.toastMsg("error", res.message)
                            }else if( res.data.isSuccess === 2){
                                _g.toastMsg("warning", res.message)
                            }
                        }
                })
              }).catch(() => {})
    },

      /* 跳转到编辑职位页面 */
    editRank(rankId,rankName){
        this.$router.push({ path: '/admin/rank/edit', query: { rankId, rankName}})
    },

      /* 跳转到新增职业技能页面 */
      routerToAddRank(){
        this.$router.push('/admin/rank/add')
      },

     handleSizeChange(){
        this.getAllPagingRank()
      },
      handleCurrentChange(){
         this.getAllPagingRank()
      },

      /* 获取职业技能列表 */
      getAllPagingRank(){
            const that = this
            let tableShowRank = []           //  显示的职业技能           
            const sortType = that.sortType //   //  1升序，2降序    
            const sortIdent = that.sortIdent 
            const data = {
                pageSize:that.serverPage.pageSize,
                currPage:that.serverPage.currPage,
                sortIdent,
                sortType
            }

            _g.showLoading('加载中');
            this.apiPost("admin/rank/getAllPagingRank",data).then(res => {
                    _g.showLoading().close()
                    if(typeof res === 'string'){
                      res = JSON.parse(res)
                    }
                    if (res.code != 200) {
                      this.handleError(res)
                    } else {
                        if(res.data.rankList.data.length > 0){
                            that.tableShowRank = res.data.rankList.data
                        }

                        that.serverPage.totalSize = res.data.total
                        that.serverPage.currShowSize = res.data.per_page
                    }
              })
      },
    },
    created() {
      this.getAllPagingRank()
    },
    computed: {
    },
    components: {
        colorPicker
    },
    mixins: [http]
  }
</script>

<style lang="less" scoped>
.colorLabel{
    position: relative;
    width: 16px;
    height: 16px;
    top: 3px;
}
</style>

<style lang="less">
.colorPoper{
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
}
</style>

